<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.margin_div {
				position: relative;
				box-sizing: border-box;
				margin: 0 auto;
				width: 500px;
				height: 300px;
				border: 1px dashed black;
			}
			
			.border_div {
				position: relative;
				margin: 0 auto;
				margin-top: 30px;
				width: 360px;
				height: 160px;
				border: 30px solid yellowgreen;
			}
			
			.content_div {
				position: relative;
				margin: 0 auto;
				margin-top: 30px;
				width: 300px;
				height: 100px;
				border: 1px dashed black;
			}
			
			span {
				position: absolute;
			}
			
			p {
				font-size: 20px;
				color: yellow;
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: yellowgreen;
			}
		</style>
	</head>

	<body>
		<!--第一题
			行元素:
				没学过: <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <bdo>可覆盖默认的文本方向 
				<em>定义为强调的内容 <code>定义计算机代码文本 <samp>定义样本文本 <q>定义短的引用
				<big>大号字体加粗 <cite>引用进行定义  <dfn>定义一个定义项目 <b>字体加粗 <i>斜体文本效果
				<kbd>定义键盘文本 <label>标签为 <select>创建单选或多选菜单 <sup>定义上标文本
				<tt>打字机或者等宽的文本效果 <sub>定义下标文本
				学过:
				<textarea>多行的文本输入控件 <var>定义变量 <a>标签 <br>换行 <small>呈现小号字体效果
				<span>组合文档中的行内元素 <strong>语气更强的强调的内容 <img>向网页中嵌入一幅图像
				<input>输入框 <input> 元素定义标注（标记）
			块元素:
				没学过: <dd>定义列表中定义条目 <dl>定义列表 <dt>定义列表中的项目 <fieldset>定义一个框架集
				<legend>元素(定义标题) <fieldset>元素定义标题 <pre>定义预格式化的文本
				学过: 
				<address>定义地址 <caption>定义表格标题 <div>定义文档中的分区或节 <form>创建 HTML 表单
				<h1>定义最大的标题 <h2>定义副标题 <h3>定义标题 <h4>定义标题 <h5>定义标题 <h6>定义最小的标题
				<hr>创建一条水平线 <li>标签定义列表项目 <ol>定义有序列表 <ul>定义无序列表 <p>标签定义段落
				<table>标签定义 <tbody>标签表格主体（正文）<td>表格中的标准单元格 <tfoot>定义表格的页脚（脚注或表注）
				<th>定义表头单元格 <thead>标签定义表格的表头 <tr>定义表格中的行
		-->
		<div class="margin_div">
			<span style="left: 220px;">Margin</span>
			<div class="border_div">
				<span style="left: 153px; top: -23px;">Border</span>
				<div class="padding_div">
					<span style="left: 145px; top: 7px;">Padding</span>
					<div class="content_div"><span style="left: 115px; top: 10px;">Content</span></div>
				</div>
			</div>
		</div>
		<!--第二题
			通配选择符* { sRules } 
			类型选择符E { sRules }  
			td { font-size:14px; width:120px; } 
			属性选择符 
			E [ attr ] { sRules } 
			E [ attr = value ] { sRules } 
			E [ attr ~= value ] { sRules } 
			E [ attr |= value ] { sRules }  
			h[title] { color: blue; }/* 所有具有title属性的h对象*/ 
			span[class=demo] { color: red; }  
			div[speed="fast"][dorun="no"] { color: red; } 
			a[rel~="copyright"] { color:black; } 
			包含选择符E1 E2 { sRules } 
			table td { font-size:14px; }
			子对象选择符E1 > E2 { sRules } 
			div ul>li p { font-size:14px; } 
			ID选择符 #ID { sRules } 
			类选择符 E.className { sRules } 
			选择符分组  
			E1 , E2 , E3 { sRules } 
			伪类及伪对象选择符  
			E : Pseudo-Classes { sRules }  
			( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang] 
			E : Pseudo-Elements { sRules }  
			( Pseudo-Elements )[:first-letter :first-line :before :after] 
			
			可以继承的有：
			font-size font-family color  
			
			不可继承的一般有：
			border padding margin background-color width height 等
			
			算法: 
			1级: . [] ();字段访问,数组下标,函数调用以及表达式分组;
			2级: ++ -- - ~ ! delete new typeof void;一元运算符,返回数据类型,对象创建,未定义值;
			3级: * / % ; 乘法,除法,取模;
			4级: + - +; 加法,减法,字符串连接;
			5级: << >> >>>; 移位;
			6级: == != === !== ; 等于,不等于,严格相等,非严格相等;
			7级:& ; 按位与;
			8级:^ 按位异或;
			9级:| 按位或;
			10级:&& ; 逻辑与;
			11级:|| ; 逻辑或;
			12级:?: 条件;
			13级: = = ; 赋值,运算赋值;
			14级: , ; 多重求值;
			
			优先级最高:
			使用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，
			另外在同级样式按照申明的顺序后出现的样式具有高优先级。

		-->
		<!--第三题
			1.父级div定义height
				优点：简单，代码少，容易掌握
				缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
			2.结尾处加空div标签clear:both
				优点：简单，代码少，浏览器支持好，不容易出现怪问题
				缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽
			3.父级div定义伪类:after和zoom
				优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
				缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
			4.父级div定义overflow:hidden
				优点：简单，代码少，浏览器支持好
				缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
			5.父级div定义overflow:auto
				优点：简单，代码少，浏览器支持好
				缺点：内部宽高超过父级div时，会出现滚动条。
			6.父级div也一起浮动
				优点：没有优点...
				缺点：会产生新的浮动问题.
			7.父级div定义display:table
				优点：没有优点
				缺点：会产生新的未知问题
			8.结尾处加br标签clear:both
				.clearfloat{clear:both}
				<br class="clearfloat" />
				没这么用过, 不知道啥样
		-->
		<!--第四题
			html 几种储存方法
			1.本地储存 localstorage;
			2.本地储存 sessionstorage;
			3.离线缓存 application cache;
			4. Web SQL;
			5.indexDB;
		-->
		<!--第五题
		一、200状态码：
  		成功2××：成功处理了请求的状态码。  
  			1、200 ：服务器已成功处理了请求并提供了请求的网页。  
  			2、204： 服务器成功处理了请求，但没有返回任何内容。 
  		二、300状态码：
  		重定向3××：每次请求中使用重定向不要超过5 次。
			1、301： 请求的网页已永久移动到新位置。当URLs发生变化时，使用301代码。搜索引擎索引中保存新的URL。
			2、302： 请求的网页临时移动到新位置。搜索引擎索引中保存原来的URL。
			3、304：如果网页自请求者上次请求后没有更新，则用304代码告诉搜索引擎机器人，可节省带宽和开销。
  		三、400状态码：
  		客户端错误4×× ：表示请求可能出错，妨碍了服务器的处理。  
	  		1、400： 服务器不理解请求的语法。  
	  		2、403： 服务器拒绝请求。  
	  		3、404： 服务器找不到请求的网页。服务器上不存在的网页经常会返回此代码。  
	  		4、410 ：请求的资源永久删除后，服务器返回此响应。该代码与 404（未找到）代码相似，但在资源以前存在而现在不存在的情况下，
	  		有时用来替代404 页面代码。如果资源已永久删除，应当使用301指定资源的新位置。
 		四、500状态码：
  		服务器错误5×× ：表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。 
	  		1、500 ：服务器遇到错误，无法完成请求。  
	  		2、503： 服务器目前无法使用（由于超载或停机维护）
		-->
		<button id="button1">点击更换</button>
		<p id="text_p"></p>
		<script type="text/javascript">
			var btn = document.getElementById("button1");
			var p = document.getElementById("text_p");
			var index = 0;

			function getInformation() {
				var myDate = new Date();
				var date1 = myDate.getDate() + "日";
				var day = myDate.getDay();
				if(day == 0) {
					day = "星期日";
				} else {
					day = "星期" + day;
				}
				var mouth = myDate.getMonth() + 1 + "月";
				return [date1, day, mouth];
			}
			
			var arr = getInformation();
			index = localStorage.getItem("aaa");
			p.innerHTML = arr[index];
			btn.onclick = function() {
				index++;
				if(index == 3) {
					index = 0;
				}
				localStorage.setItem("aaa", index)
				p.innerHTML = arr[index];
			}
				
		</script>
	</body>

</html>